<script lang="ts" setup>
import { useLocale } from '@/locale/locale';
import { storeToRefs } from 'pinia';
import { usePopupStore } from '@/store/popup';

const { t } = useLocale();
const popupStore = usePopupStore();
const { carOrderPackageRef } = storeToRefs(popupStore);
defineProps<{
  freeNum: number;
  extraNum: number;
  totalNum: number;
}>();
</script>

<template>
  <apt-popup-car ref="carOrderPackageRef" :showConfirmBtn="false" :title="t('TransfeCanBringLuggage')">
    <view class="apt-car-order-package-contain">
      <view class="apt-car-order-package-contain-title">{{ t('TransfeLuggageDetail') }}</view>
      <view class="apt-car-order-package-contain-item">
        <text>{{ t('TransfeFreeLuggage') }}</text>
        <text>{{ t('TransfrInnnExtraNum', { num: freeNum }) }}</text>
      </view>
      <view class="apt-car-order-package-contain-item">
        <text>{{ t('TransfrExtra') }}</text>
        <text>{{ t('TransfrInnnExtraNum', { num: extraNum }) }}</text>
      </view>
      <view class="apt-car-order-package-contain-total">
        {{ t('TransfeOrderTotal') }}
        <text>{{ t('TransfrInnnExtraNum', { num: totalNum }) }}</text>
      </view>
    </view>
  </apt-popup-car>
</template>
<style lang="scss">
.apt-car-order-package-contain {
  padding-bottom: 30rpx;
  &-title {
    font-weight: 500;
    font-size: 28rpx;
    color: #3d3d3d;
    line-height: 40rpx;
  }

  &-item {
    margin-top: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    text {
      &:first-child {
        font-weight: 400;
        font-size: 24rpx;
        color: #979797;
        line-height: 34rpx;
      }

      &:last-child {
        font-weight: 600;
        font-size: 24rpx;
        color: #3d3d3d;
        line-height: 34rpx;
      }
    }
  }

  &-total {
    margin-top: 64rpx;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-weight: 400;
    font-size: 20rpx;
    color: #3d3d3d;
    line-height: 28rpx;

    text {
      font-weight: 500;
      font-size: 36rpx;
      color: #3d3d3d;
      line-height: 50rpx;
    }
  }
}
</style>
